/**
 * =============================================================================
 * ************   Drawer 抽屉栏导航   ************
 * =============================================================================
 */

.mdui-drawer {
  transition: all .3s @animation-curve-linear-out-slow-in;
}

/* 抽屉栏外层，默认出现在左侧且隐藏 */
.mdui-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: @z-index-drawer;
  box-sizing: border-box;

  // 手机端宽度为 100% - 56px，最大为 280px
  /* stylelint-disable-next-line */
  width: calc(~"100% - 56px");
  max-width: @drawer-width-xs;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  will-change: width;
  -webkit-overflow-scrolling: touch;

  &.mdui-drawer-fixed {
    position: fixed;
  }

  &.mdui-drawer-close {
    width: 0 !important;
    box-shadow: none !important;
  }

  /* 出现在右侧的抽屉栏 */
  &.mdui-drawer-right {
    right: 0;
    left: auto;
  }

  &.mdui-drawer-persistent {
    z-index: inherit;
    width: @drawer-width-md;
    max-width: none;
  }

  // 平板端宽度为 100% - 64px，最大为 320px
  @media (min-width: @screen-sm-min) {
    /* stylelint-disable-next-line */
    width: calc(~"100% - 64px");
    max-width: @drawer-width-sm;
  }

  @media (min-width: @screen-lg-min) {
    width: @drawer-width-md;
    max-width: none;
  }

  &:not(.mdui-drawer-persistent) {
    background-color: #fff;
    .mdui-shadow(16);
  }

  +.mdui-overlay {
    z-index: calc(@z-index-drawer - 1);
  }
}

/* PC 上默认有上边距 */
.mdui-drawer.mdui-drawer-inset {
  .mdui-appbar-with-tab>& {
    top: 48px;
  }

  .mdui-appbar-with-tab-larger>& {
    top: 72px;
  }

  .mdui-appbar-with-toolbar>& {
    top: @appbar-height-xs-portrait;
  }

  .mdui-appbar-with-toolbar.mdui-appbar-with-tab>& {
    top: @appbar-height-xs-portrait + 48px;
  }

  .mdui-appbar-with-toolbar.mdui-appbar-with-tab-larger>& {
    top: @appbar-height-xs-portrait + 72px;
  }

  // 平板和桌面
  @media (min-width: @screen-sm-min) {
    .mdui-appbar-with-toolbar>& {
      top: @appbar-height-sm;
    }

    .mdui-appbar-with-toolbar.mdui-appbar-with-tab>& {
      top: @appbar-height-sm + 48px;
    }

    .mdui-appbar-with-toolbar.mdui-appbar-with-tab-larger>& {
      top: @appbar-height-sm + 72px;
    }
  }

  // 手机横屏
  @media (orientation: landscape) and (max-width: @screen-xs-max-landscape) {
    .mdui-appbar-with-toolbar>& {
      top: @appbar-height-xs-landscape;
    }

    .mdui-appbar-with-toolbar.mdui-appbar-with-tab>& {
      top: @appbar-height-xs-landscape + 48px;
    }

    .mdui-appbar-with-toolbar.mdui-appbar-with-tab-larger>& {
      top: @appbar-height-xs-landscape + 72px;
    }
  }
}

/* 抽屉栏不是透明时添加阴影 */
.mdui-drawer[class*="mdui-color-"]:not(.mdui-color-transparent) {
  .mdui-shadow(16);
}


/**
 * =============================================================================
 * ************   Drawer dark   ************
 * =============================================================================
 */
.layout-theme({

  // 手机平板上的样式
  @media (max-width: @screen-sm-max) {
    .mdui-drawer {
      background-color: @layout-dark-color-4 !important;
    }
  }
});